<template>
  <div id="declareTotal">
    <div id="main"></div>
  </div>
</template>

<script>

  export default {
    name: 'MasterTest',
    data() {
      return {
        option: {
          title: {
            text: '等级申报总人数',
            left: 'center',
            top: 20,
            textStyle: {
              //文字颜色
              color: '#fff',
              //字体风格,'normal','italic','oblique'
              fontStyle: 'normal',
              //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontWeight: 'normal',
              //字体系列
              fontFamily: 'sans-serif',
              //字体大小
              fontSize: 18
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'horizontal',
            itemWidth: 10,
            itemHeight: 10,
            bottom: '2%',
            left: 'center',
            textStyle: {
              color: '#fff',
            }
          },
          series: [
            {
              name: '等级申报总人数',
              type: 'pie', // 图标类型为饼状图
              avoidLabelOverlap: false,
              color: ['#ff0000', '#FA5C24', '#FAC60E', '#3066E3'], // 也可以改变图标颜色
              radius: ['50%', '10%'], // 图表大小占dom节点的百分比
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'normal'
                }
              },
              data: [
                {value: 6352, name: '一级'},
                {value: 274, name: '二级'},
                {value: 310, name: '三级'},
                {value: 335, name: '四级'},
              ]
            },
          ]
        }
      }
    },
    mounted() {
      const declareChart = this.$echarts.init(document.getElementById('main'))
      declareChart.setOption(this.option)
    }
  }
  /*****************/

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #declareTotal {
    height: 380px;
    text-align: center;
    background-color: rgba(37, 80, 174, 0.55);
  }

  #main {
    width: 100%;
    height: 100%;
  }
</style>
